<template>
  <div class="searchpage">
    <div>
      <span>
        <router-link to="/">
          <img src="../assets/img/other/search.png" alt="" />
        </router-link>
      </span>
      <input type="text" placeholder="请输入搜索内容" v-model="searchitem2" />
      <div>
        <div @click="search">搜索</div>
      </div>
    </div>
    <hr />
    <!-- 文章列表 -->
    <div>
      <div v-for="(i, index) in article" :key="i.nid">
        <ul class="arti">
          <li class="atitle">
            <span @click="gotoArticle(i.nid)"
              >{{ index + 1 }}.{{ i.nname }}</span
            >
            <p class="adisc" :style="i.ncover ? 'padding-left:130px' : ''">
              {{ i.disc }}
            </p>
            <div v-if="i.ncover" class="ncover" @click="gotoArticle(i.nid)">
              <img :src="i.ncover" alt="" />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="hot"><f-3-hot-copy /></div>
  </div>
</template>

<script>
import F3HotCopy from "@/components/F3Hot copy.vue";
export default {
  components: { F3HotCopy },
  // props:['searchItem'],
  data() {
    return {
      searchitem2: "",
      article: [],
    };
  },
  methods: {
    getData() {
      this.searchitem2 = this.$route.query.searchitem;
      // console.log(this.searchitem2);
      let params = `searchitem=${this.searchitem2}`;
      let url = "http://120.78.224.75:6677/search";
      this.axios.post(url, params).then((res) => {
        console.log(res.data.result);
        this.article = res.data.result;
      });
    },
    search() {
      if (this.searchitem2 == this.$route.query.searchitem) {
        return;
      }
      this.$router.push(`?searchitem=${this.searchitem2}`);
      // this.searchitem2 = this.$route.query.searchitem;
      let params = `searchitem=${this.searchitem2}`;
      let url = "http://120.78.224.75:6677/search";
      this.axios.post(url, params).then((res) => {
        this.article = res.data.result;
      });
    },
    // 跳转点击页
    gotoArticle(nid) {
      this.$router.push(`/article?nid=${nid}`);
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.hot {
  position: absolute;
  right: 500px;
  top: 160px;
}
.arti {
  display: block;
  margin: 20px;
  margin-left: 160px;
  height: 155px;
  width: 900px;
  .atitle {
    > span {
      font-size: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }
    height: 100%;
    border-bottom: 1px solid rgb(240, 240, 240);
    position: relative;
  }
  .ncover {
    width: 138px;
    height: 92px;
    overflow: hidden;
    border-radius: 5px;
    position: absolute;
    top: 30px;
    > img {
      display: inline-block;
      width: 138px;
      height: 92px;
      cursor: pointer;
    }
  }
  .adisc {
    margin: 20px;
    font-size: 14px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
.searchpage > hr {
  border: 1px solid rgb(240, 240, 240);
}
.searchpage > div:nth-child(1) {
  display: flex;
  align-items: center;
  margin: 50px;
  > span {
    padding-right: 40px;
  }
  > input {
    width: 600px;
    height: 50px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    border: 1px solid #eee;
    padding-left: 20px;
  }
  > div {
    width: 100px;
    height: 50px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    background-color: #90080e;
    line-height: 52px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 0;
    > div {
      color: #fff;
    }
  }
}
</style>
